<template>
  <div class="complex-search-wrapper">
    <div class="complex-select-title">
      <label for="">高级搜索({{ count }})</label>
      <el-alert
        v-for="(item, index) in complexSearch"
        :key="index"
        @close="closeSearch(item, index)"
        :closable="true"
      >
      {{ item.parent.value }}：{{ item.child.value }}
      </el-alert>
    </div>
    <div class="complex-search">
      <div class="search-title">
        <p class="">高级搜索</p>
        <p class="close">关闭</p>
      </div>
      <div class="screen-box">
        <div class="screen-top">
          <p class="">筛选:</p>
          <div v-show="true" class="add-btn">
            <el-select
              v-model="selectOne"
              multiple
              placeholder="Select"
              class="add-btn-select"
              :popper-append-to-body="false"
              :suffix-icon="Plus"
            >
              <el-option
                v-for="item in listFields"
                :key="item"
                :label="item.label"
                :value="item"
                :disabled="selectTwo.includes(item)"
              />
              <template #header>
                <div>选择字段进行操作</div>
              </template>
            </el-select>
          </div>
        </div>
        <div class="screen-con" v-for="(i, index) in selectOne" :key="index">
          <label for="" class="custom-label">{{ i.value }}</label>
          <el-select
            v-model="selectValues[index]"
            placeholder="Select"
            class="custom-select"
            @change="changeVal(i, selectValues[index])"
          >
            <el-option
              v-for="item in i?.detail"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </div>
      </div>
      <div class="mate-box">
        <div class="mate-top">
          <p class="">匹配:</p>
          <div class="add-btn">
            <el-select
              v-model="selectTwo"
              multiple
              placeholder="Select"
              class="add-btn-select"
              :popper-append-to-body="false"
              :suffix-icon="Plus"
            >
              <el-option
                v-for="item in listFields"
                :key="item"
                :label="item.label"
                :value="item"
                :disabled="selectOne.includes(item)"
              />
              <template #header>
                <div>选择字段进行操作</div>
              </template>
            </el-select>
          </div>
        </div>
        <div class="mate-con" v-for="(i, index) in selectTwo" :key="index">
          <label for="" class="custom-label">{{ i.value }}</label>
          <el-select
            v-model="selectValues2[index]"
            placeholder="Select"
            class="custom-select"
            @change="changeVal(i, selectValues2[index])"
          >
            <el-option
              v-for="item in i?.detail"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { number } from 'echarts';

type Option = {
  value: string
  label: string
  disabled: boolean
  detail: Detail[]
}

type Detail = {
  value: string
  label: string
}

// 筛选选中
const selectOne = ref<Option[]>([])

// 匹配选中
const selectTwo = ref<Option[]>([])
// 筛选子选择器选中
const selectValues = ref([])
// 匹配子选择器选中
const selectValues2 = ref([])

// 高级搜索个数
let count = ref(0)


const listFields = ref([
  {
    value: '数据中心',
    label: '数据中心',
    disabled: false,
    detail: [
      {
        value: '广州数据中心111',
        label: '广州数据中心111',
      },
      {
        value: '广州数据中心222',
        label: '广州数据中心222',
      },
    ]
  },
  {
    value: '设备管理员',
    label: '设备管理员',
    disabled: false,
    detail: [
      {
        value: '广州设备管理员111',
        label: '广州设备管理员111',
      },
      {
        value: '广州设备管理员222',
        label: '广州设备管理员222',
      },
    ]
  },
  {
    value: '设备名称',
    label: '设备名称',
    disabled: false,
    detail: [
      {
        value: '广州设备名称111',
        label: '广州设备名称111',
      },
      {
        value: '广州设备名称222',
        label: '广州设备名称222',
      },
    ]
  },
  {
    value: '设备状态',
    label: '设备状态',
    disabled: false,
    detail: [
      {
        value: '设备状态111',
        label: '设备状态111',
      },
      {
        value: '设备状态222',
        label: '设备状态222',
      },
    ]
  },
  {
    value: '设备品牌',
    label: '设备品牌',
    disabled: false,
    detail: [
      {
        value: '设备品牌111',
        label: '设备品牌111',
      },
      {
        value: '设备品牌222',
        label: '设备品牌222',
      },
    ]
  },
  {
    value: '设备类型',
    label: '设备类型',
    disabled: false,
    detail: [
      {
        value: '设备类型111',
        label: '设备类型111',
      },
      {
        value: '设备类型222',
        label: '设备类型222',
      },
    ]
  },
  {
    value: '管理IP地址',
    label: '管理IP地址',
    disabled: false,
    detail: [
      {
        value: '管理IP地址111',
        label: '管理IP地址111',
      },
      {
        value: '管理IP地址222',
        label: '管理IP地址222',
      },
    ]
  },
  {
    value: '生产IP地址',
    label: '生产IP地址',
    disabled: false,
    detail: [
      {
        value: '生产IP地址111',
        label: '生产IP地址111',
      },
      {
        value: '生产IP地址222',
        label: '生产IP地址222',
      },
    ]
  },
  {
    value: '所在部门',
    label: '所在部门',
    disabled: false,
    detail: [
      {
        value: '所在部门111',
        label: '所在部门111',
      },
      {
        value: '所在部门222',
        label: '所在部门222',
      },
    ]
  },
  {
    value: '所在机房',
    label: '所在机房',
    disabled: false,
    detail: [
      {
        value: '所在机房111',
        label: '所在机房111',
      },
      {
        value: '所在机房222',
        label: '所在机房222',
      },
    ]
  },
  {
    value: '所在机柜',
    label: '所在机柜',
    disabled: false,
    detail: [
      {
        value: '所在机柜111',
        label: '所在机柜111',
      },
      {
        value: '所在机柜222',
        label: '所在机柜222',
      },
    ]
  },
  {
    value: '设备序列号',
    label: '设备序列号',
    disabled: false,
    detail: [
      {
        value: '设备序列号111',
        label: '设备序列号111',
      },
      {
        value: '设备序列号222',
        label: '设备序列号222',
      },
    ]
  },
  {
    value: '设备描述',
    label: '设备描述',
    disabled: false,
    detail: [
      {
        value: '广州设备描述111',
        label: '广州设备描述111',
      },
      {
        value: '广州设备描述222',
        label: '广州设备描述222',
      },
    ]
  },
])


let complexSearch = ref<any[]>([])

const changeVal = (par: object, chi: object) => {
  const obj = {
    parent: par,
    child: chi
  }
  const res = complexSearch.value.find((obj) => obj.parent === par)
  if (res) {
    res.child = chi;
  } else {
    complexSearch.value.push(obj);
    count.value ++;
  }
}

const closeSearch = (item: any, idx: number) => {
  count.value --;
  selectOne.value.forEach((i, index) => {
    if (i === item.parent) {
      selectOne.value.splice(index, 1);
    }
  });
  selectTwo.value.forEach((i, index) => {
    if (i === item.parent) {
      selectTwo.value.splice(index, 1);
    }
  });
  selectValues.value.forEach((i, index) => {
    if (i === item.child) {
      selectValues.value.splice(index, 1);
    }
  });
  selectValues2.value.forEach((i, index) => {
    if (i === item.child) {
      selectValues2.value.splice(index, 1);
    }
  });
}

</script>

<style scoped lang="stylus">
.complex-search-wrapper {
  width: 528px;
  min-height: 310px;
  margin: 30px;
}
.complex-select-title {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 5px 0;
  max-height: 55px;
  overflow: hidden;
  label {
    margin-right: 10px;
    font-size: 12px;
    font-weight: 300;
    color: #2196F3;
  }
  .el-alert {
    width: auto;
  }
}
.complex-search {
  width: 528px;
  min-height: 254px;
  border: 1px solid #979797;
  background: #FDFDFD;
  box-shadow: 0px 2px 4px 0px;
  padding: 10px 29px 20px 20px;
  .search-title {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .close {
      cursor: pointer;
    }
  }
  .screen-box, .mate-box {
    margin-bottom: 13px;
    .screen-top, .mate-top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid grey;
      margin-bottom: 14px;
      height: 26px;
      p {
        font-size: 12px;
        font-weight: 300;
        color: #000000;
      }
      .add-btn {
        cursor: pointer;
        width: 16px;
        height: 16px;
        .add-btn-select {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  .screen-con, .mate-con {
    height: 32px;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
    width: 253px;
    font-size: 14px;
    font-weight: 350;
    .custom-label {
      width: 90px;
      display: inline-block;
    }
  }
}
.custom-select {
  width: 163px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin: 4px 0;
}
.custom-select :deep(.el-select__wrapper) {
  line-height: 24px;
  padding: 0 6px;
  min-height: 24px;
}
.add-btn-select :deep(.el-select__wrapper) {
  line-height: 16px;
  padding: 0;
  min-height: 16px;
}
.add-btn-select :deep(.el-select__selection) {
  display: none;
}
.complex-select-title :deep(.el-alert) {
  display: inline-block;
  min-width: 100px;
  padding: 2px 35px 2px 4px;
  background: none;
  border: 1px solid #2196F3;
  margin: 0 10px 5px 0;
}
.complex-select-title :deep(.el-alert__description) {
  font-size: 12px;
  font-weight: 300;
  color: #2196F3;
}
.complex-select-title :deep(.el-alert__close-btn) {
  right: 6px;
  top: 4px;
}
</style>

<style lang="stylus">
.el-select-dropdown {
  width: 130px;
  border: 1px solid #979797;
  border-radius: 8px;
}
.el-popper__arrow {
  display: none;
}
.el-select-dropdown__item {
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  padding: 2px 20px 2px 34px;
}
.el-select-dropdown__item.is-selected {
  &::after {
    content: '';
    height: 0 !important;
    width: 0 !important;
  }
  &::before {
    content: '\2714';
    color: #ffffff;
    width: 10px;
    height: 10px;
    font-size: 6px;
    background: #409EFF;
    line-height: 10px;
    border-radius: 4px;
    text-align: center;
    vertical-align: middle;
    border: 0;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.el-select-dropdown__item.is-disabled {
  &::before {
    content: '\2714';
    color: rgba(0, 0, 0, 0.35);
    width: 10px;
    height: 10px;
    font-size: 6px;
    background: rgba(0, 0, 0, 0.04);
    line-height: 10px;
    border-radius: 4px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.15);;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.el-select-dropdown__item {
  &::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.el-select-dropdown__header {
  border: none;
  padding: 5px 0 0 0;
  text-align: center
}
.el-select__wrapper,
.el-select__wrapper.el-tooltip__trigger,
.el-select__wrapper.is-hovering {
  border: none;
}
</style>